<template>
  <div class="backup-setting-management">
    <div class="toolbar" style="align-self: flex-end; margin-bottom: 18px">
      <a-space wrap>
        <backup-button />
      </a-space>
    </div>
    <div style="overflow: auto; flex: 1">
      <a-table
        bordered
        :data-source="dataSource"
        :columns="columns"
        style="flex: 1"
        :loading="loading"
        ref="instanceRef"
        :pagination="query"
        @change="onChange"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'backStartTime'">
            <span>
              {{
                record.backStartTime
                  ? dayjs
                      .utc(record.backStartTime)
                      .format('YYYY-MM-DD HH:mm:ss')
                  : ''
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'backEndTime'">
            <span>
              {{
                record.backEndTime
                  ? dayjs.utc(record.backEndTime).format('YYYY-MM-DD HH:mm:ss')
                  : ''
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'backupSuccess'">
            <span>
              {{ record?.backupSuccess ? '是' : '否' }}
            </span>
          </template>
        </template>
        <template #emptyText>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100%;
            "
          >
            <a-spin :spinning="loading">
              <a-empty
                :image="notData"
                :description="loading ? '加载中...' : '暂无数据'"
              />
            </a-spin>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, ref, onMounted } from 'vue'
import { message as Message } from 'ant-design-vue'
import { nanoid } from 'nanoid'
import ATable from '@/components/table.vue'
import { getBackupList } from '@/api/backup.js'
import dayjs from 'dayjs'
import notData from '@/assets/images/not-data.png'
import BackupButton from './conform-again.vue'

/**
 * 数据查询
 */
let query = ref({ current: 1, pageSize: 10 })

async function update() {
  try {
    let params = {
      pageNum: query.value.current,
      pageSize: query.value.pageSize,
    }
    let result = await getBackupList(params)
    dataSourceRemote.value = result?.data.records || []
    query.value.total = result?.data?.total || 0
  } catch (e) {
    message.error('获取数据失败')
  }
}

/**
 * table组件分页、排序、筛选变化事件
 */
function onChange({ current, pageSize }, filters, sorter, { action }) {
  query.value.current = current
  query.value.pageSize = pageSize
  if (action !== 'paginate') {
    query.value.current = 1
    query.value.pageSize = 10
  }
  update()
}

onMounted(async () => {
  loading.value = true
  await update()
  loading.value = false
})

let columns = [
  {
    title: '编号',
    dataIndex: 'fileId',
  },
  {
    title: '文件名',
    dataIndex: 'fileName',
  },
  {
    title: '是否备份成功',
    dataIndex: 'backupSuccess',
  },
  {
    title: '备份开始时间',
    dataIndex: 'backStartTime',
  },
  {
    title: '备份结束时间',
    dataIndex: 'backEndTime',
  },
]
let dataSourceRemote = ref([])
let dataSourceLocal = ref([])

let dataSource = computed(() => {
  return [...dataSourceLocal.value, ...dataSourceRemote.value]
})
/**
 * 事件
 */

let loading = ref(false)

/**
 * 滚动
 */
let instanceRef = ref()
function scrollToRow(suffixName) {
  let tableBody = instanceRef.value.$el.querySelector('.ant-table-body')
  if (tableBody) {
    if (suffixName) {
      let rowKey = dataSource.value.find(
        item => item.suffixName === suffixName,
      )?.key
      if (rowKey) {
        let rowElement = tableBody.querySelector(`[data-row-key="${rowKey}"]`)
        if (rowElement) {
          let tableBodyScrollTop = rowElement.offsetTop
          tableBody.scrollTop = tableBodyScrollTop
        }
      }
    } else {
      tableBody.scrollTop = 0
    }
  }
}
</script>
<style lang="less" scoped>
.backup-setting-management {
  background-color: #fff;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
